<!doctype html>
<!--suppress ThymeleafVariablesResolveInspection-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="canonical" href="https://getbootstrap.com/docs/4.6/examples/sign-in/">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{css/amazeui.min.css}"/>
    <link rel="stylesheet" th:href="@{css/admin.css}"/>
</head>
<body>
<div class="admin-content-body">
    <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">主题帖管理</strong><small></small></div>
    </div>

    <hr>

    <div class="am-g">
        <input id="Button1" type="button" value="新增"/>
        <div id="fade" class="black_overlay"></div>
        <div id="MyDiv" class="white_content">
            点击阴影处退出！！！<br>
            <form class="form-signin" method="post" th:action="@{/discuss/insert}" id="discuss-form">
                <h1 class="h3 mb-3 font-weight-normal">新增</h1><br>
                <label for="inputTitle" class="sr-only">标题</label>
                <input type="text" id="inputTitle" class="form-control" placeholder="标题" name="title">
                <br>
                <br>
                <label for="inputContent" class="sr-only">内容</label>
                <input type="text" id="inputContent" class="form-control" placeholder="内容" name="content">
                <br>
                <br>
                <!--<label for="inputUsername" class="sr-only">留言人</label>-->
                <!--<input type="text" id="inputUsername" class="form-control" placeholder="留言人" name="username">-->

                <select id="inputUsername" name="username" class="form-control">
                    <option selected disabled>留言用户</option>
                    <option th:each="item:${userList}" th:text="${item.username}" th:value="${item.username}" name="username"></option>
                </select>
                <br>
                <br>
                <button class="btn btn-lg btn-primary btn-block" type="submit">确定</button>
            </form>
        </div>
        <div class="am-u-sm-12 am-u-md-3">

        </div>
    </div>
    <div class="am-g">
        <div class="am-u-sm-12">
            <!--          <form class="am-form">-->
            <table class="am-table am-table-striped am-table-hover table-main">
                <thead>
                <tr>
                    <th class="table-check"><input type="checkbox"></th>
                    <th class="table-id">ID</th>
                    <th class="table-title">标题</th>
                    <th class="table-type">内容</th>
                    <th class="table-author am-hide-sm-only">发布者</th>
                    <th class="table-date am-hide-sm-only">日期</th>
                    <th class="table-set">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="discuss,item:${discussList}">
                    <td><input type="checkbox"></td>
                    <td th:text="${discuss?.id}" id="discussId">1</td>
                    <td><a href="#" th:utext="${discuss?.title}">这个模板很不错</a></td>
                    <td th:utext="${discuss?.content}">真的很不错哎</td>
                    <td class="am-hide-sm-only" th:utext="${discuss?.username}">管理员</td>
                    <td class="am-hide-sm-only" th:text="${#dates.format(discuss.date,'yyyy-MM-dd HH:mm:ss')}">2014年9月4日
                        7:28:47
                    </td>
                    <td>
                        <div>
                            <input th:id="'btn_udpate_'+${item.index}" type="button" value="编辑"/>
                            <!--弹出层时背景层DIV-->
                            <div id="fade3" class="black_overlay"></div>
                            <!-- 编辑框 可以加自己的样式 -->
                            <div id="MyDiv3" class="white_content">
                                点击阴影处退出！！！
                                <form class="form-signin" method="post" th:action="@{/discuss/update}" id="updateForm">
                                    <h1 class="h3 mb-3 font-weight-normal" >修改</h1>
                                    <label for="updateTitle" class="sr-only">标题</label>
                                    <input type="text" id="updateTitle" class="form-control" placeholder="标题"
                                           name="title">
                                    <br>
                                    <label for="updateContent" class="sr-only">内容</label>
                                    <input type="text" id="updateContent" class="form-control" placeholder="内容"
                                           name="content">
                                    <br>
                                    <label for="updateUsername" class="sr-only">发布者</label>
                                    <input type="text" id="updateUsername" class="form-control" placeholder="发布者"
                                           name="username">
                                    <br>
                                    <button class="btn btn-lg btn-primary btn-block" type="submit">确定</button>
                                </form>
                            </div>
                            <input th:id="'btn_remove_'+${item.index}" type="button" value="删除"/>
                            <!--弹出层时背景层DIV-->
                            <div id="fade2" class="black_overlay"></div>
                            <!-- 编辑框 可以加自己的样式 -->
                            <div id="MyDiv2" class="white_content">
                                点击阴影处退出！！！<br>
                                <h1 class="h3 mb-3 font-weight-normal" align="center">确定要删除吗？</h1><br><br>
                                <button class="btn btn-lg btn-primary btn-block" type="text" id="delOnclick">确定</button>
                            </div>
                        </div>
                    </td>
                </tr>

                </tbody>
            </table>
            <div class="am-cf">
                共 <i th:text="${sum}">12</i> 条记录
                <div class="am-fr">
                    <ul class="am-pagination">
                        <li class="am-disabled"><a href="#">«</a></li>
                        <li class="am-active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">»</a></li>
                    </ul>
                </div>
            </div>
            <hr>
        </div>

    </div>
</div>

<style>
    .black_overlay {
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .80;
        filter: alpha(opacity=80);
    }

    .white_content {
        display: none;
        position: absolute;
        top: 10%;
        left: 30%;
        width: 30%;
        height: 180%;
        background-color: white;
        z-index: 1002;
        overflow: auto;
        border-radius: 10px;
        padding-top: 10px;
        padding-right: 50px;
        padding-bottom: 10px;
        padding-left: 50px;
    }

    .white_content_small {
        display: none;
        position: absolute;
        top: 20%;
        left: 30%;
        width: 40%;
        height: 50%;
        border: 16px solid lightblue;
        background-color: white;
        z-index: 1002;
        overflow: auto;
    }

</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script th:src="@{js/global.js}"></script>

<script type="text/javascript">
    // <!--			新增弹出框-->
    $("#Button1").click(function () {
        document.getElementById("MyDiv").style.display = 'block';
        document.getElementById("fade").style.display = 'block';
        var bgdiv = document.getElementById("fade");
        bgdiv.style.width = document.body.scrollWidth;
        $("#fade").height($(document).height());
        var discussId = document.getElementById("discussId").innerText
    });
    //关闭弹出层
    $("#fade").click(function () {
        document.getElementById("MyDiv").style.display = 'none';
        document.getElementById("fade").style.display = 'none';
    });


    //删除弹出框
    $("input[id^='btn_remove_']").click(function () {
        document.getElementById("MyDiv2").style.display = 'block';
        document.getElementById("fade2").style.display = 'block';
        var bgdiv = document.getElementById("fade2");
        bgdiv.style.width = document.body.scrollWidth;
        $("#fade2").height($(document).height());
    });
    //关闭弹出层
    $("#fade2").click(function () {
        document.getElementById("MyDiv2").style.display = 'none';
        document.getElementById("fade2").style.display = 'none';
    });

    //修改弹出框
    // $("#Button3").click(function() {
    $("input[id^='btn_udpate_']").click(function () {
        document.getElementById("MyDiv3").style.display = 'block';
        document.getElementById("fade3").style.display = 'block';
        var bgdiv = document.getElementById("fade3");
        bgdiv.style.width = document.body.scrollWidth;
        $("#fade3").height($(document).height());
    });
    //关闭弹出层
    $("#fade3").click(function () {
        document.getElementById("MyDiv3").style.display = 'none';
        document.getElementById("fade3").style.display = 'none';
    });


</script>
<script>
</script>
<script>
    //	删除事件

    $("#delOnclick").click(function () {

        var discussid = document.getElementById("discussId").innerText
        // alert(userid)
        // console.log("hello")
        $.ajax({
            url: CONTEXT_PATH+'/discuss/delete/' + discussid,
            type: 'delete',
            dataType: 'json',
            async: true,
            success: function () {
                alert("删除成功！")
            },
            complete: function () {
                window.location.reload()
            }
        })

    })
</script>

</body>
</html>
